<template>
  <!-- 拼图验证码 -->
  
<div v-show="flag" class="testCode">
  <p class="closeBtn"><i class="el-icon-close" @click="flag=!flag"></i></p>
  <slide-verify 
    :l="42"
    :r="2"
    :w="362"
    :h="140"
    slider-text="向右滑动"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :style="{width:'362px'}"
    class="slide-box"
    ref="slideBlock"
    v-show="flag"
  ></slide-verify>
  <div>
    6666
</div>
</div>

</template>

<script>
    export default {
        name: 'Codetest',
        data(){
            return {
                msg: '',
                text: '向右滑动->',
                // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
                accuracy: 1,
                flag: true,
            }
        },
        methods: {
            onSuccess(times){
                console.log(times);
                this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
            },
            onFail(){
                console.log('验证不通过');
                this.msg = ''
            },
            onRefresh(){
                console.log('点击了刷新小图标');
                this.msg = ''
            },
            onFulfilled() {
                console.log('刷新成功啦！');
            },
            onAgain() {
                console.log('检测到非人为操作的哦！');
                this.msg = 'try again';
                // 刷新
                this.$refs.slideblock.reset();
            },
            handleClick() {
                this.$refs.slideblock.reset();
            },
        }
    }
</script>